<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${sectionName}"></title>
    <head th:insert="~{import :: head}"></head>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main profile">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span th:text="${sectionName}"></span></h2>
            <hr>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'questions'}">
                <div class="media" th:each="question : ${pagination.data}">
                    <div class="media-left">
                        <a th:href="${'/profile/account/'+question.user.id}">
                            <img class="media-object img-rounded"
                                 th:src="${'/image/'+question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <a th:href="@{'/question/'+ ${question.id}}" th:text="${question.title}"></a>
                        </h4>
                        <span class="text-desc">
                        <span th:text="${question.commentCount}"></span> 个回复 <span
                                th:text="${question.viewCount}"></span> 次浏览 <span
                                th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span> •
                        <a th:href="@{'/publish/'+${question.id}}" class="community-menu"
                           th:if="${session.user != null && session.user.id == question.creator}">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'like'}">
                <div class="media" th:each="question : ${pagination.data}">
                    <div class="media-left">
                        <a th:href="${'/profile/account/'+question.user.id}">
                            <img class="media-object img-rounded"
                                 th:src="${question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <a th:href="@{'/question/'+ ${question.id}}" th:text="${question.title}"></a>
                        </h4>
                        <span class="text-desc">
                        <span th:text="${question.commentCount}"></span>个回复 • <span
                                th:text="${question.viewCount}"></span> 个回复 • <span
                                th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span> •
                        <a th:href="@{'/publish/'+${question.id}}" class="community-menu"
                           th:if="${session.user != null && session.user.id == question.creator}">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
                    </a>
                    </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'replies'}">
                <div class="media" th:each="notification : ${pagination.data}">
                    <div class="media-body">
                        <p class="media-heading">
                            <span th:text="${notification.notifierName +' ' + notification.typeName + ' '}"></span>
                            <a th:href="@{'/notification/'+ ${notification.id}}"
                               th:text="${notification.outerTitle}">
                            </a>
                            <span class="label label-danger" th:if="${notification.status == 0}">未读</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'account'}">
                <div class="media">
                    <div class="media-left media-middle">
                        <div class="img_div">
                            <img class="img-rounded" width="100" th:src="${'/image/'+userInfo.avatarUrl}">
                            <input type="file" name="fileToUpload" id="fileToUpload" th:if="${session.user.id==userInfo.id}" th:onchange="'javascript:fileSelected('+${session.user.id}+');'" style="display:none;">
                            <a href="javascript:void(0);" onclick="fileSelect()" th:if="${session.user.id==userInfo.id}">
                                <div th:class="${session.user.id==userInfo.id?'mask':''}">
                                    <h3>点击修改头像</h3>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="media-body">
<!--                        <span class="label label-warning" style="margin-right: 500px"-->
<!--                              th:text="${userInfo.followCount}+'个粉丝'"></span>-->
                        <h3><input type="text" name="name" th:value="${userInfo.name}"
                                   th:onchange="${session.user.id==userInfo.id?'change('+session.user.id+',this)':''}"
                                   th:readonly="${session.user.id==userInfo.id?'false':'true'}" style="border: 0px;">
                        </h3>
                    </div>
                </div>
                <br>
                <span class="label label-default" style="font-size:15px;margin: 0px 5px 0px 0px">用户名::</span>
                <input th:value="${userInfo.username}" name="username"
                       th:onchange="${session.user.id==userInfo.id?'change('+session.user.id+',this)':''}"
                       th:readonly="${session.user.id==userInfo.id?'false':'true'}"
                       style="font-size:15px;margin: 0px 200px 20px 0px;border: 0px"/>
                <span class="label label-default" style="font-size:15px;margin: 0px 5px 0px 0px">状态:</span>
                <td th:switch="${userInfo.type}">
                    <span th:case="-1">禁言</span>
                    <span th:case="1">正常</span>
                    <span th:case="2">社区管理员</span>
                </td>
                <br>
                <span class="label label-default" style="font-size:15px;margin: 0px 5px 0px 0px;">个性签名:</span>
                <input th:value="${userInfo.bio}" name="bio"
                       th:onchange="${session.user.id==userInfo.id?'change('+session.user.id+',this)':''}"
                       th:readonly="${session.user.id==userInfo.id?'false':'true'}"
                       style="font-size:15px;margin: 0px 0px 0px 0px;border: 0px;width:700px"/>
                <div class="media">
                    <div class="media-left media-middle">
                        <span class="label label-default" style="font-size:15px;margin: 0px 5px 0px 0px">绑定信息:</span>
                    </div>
                    <div class="media-body">
                        <td th:if="${userInfo.githubAccountId!=null&&userInfo.giteeAccountId!=null}">
                        <td th:if="${userInfo.githubAccountId!=null}">
                            <a th:href="${userInfo.githubUrl}" target="_blank">
                                <img class="img-circle" width="30" style="margin: 0px 40px 0px 0px;"
                                     src="/images/github.jpg" title="github主页"/>
                            </a>
                        </td>
                        <td th:if="${userInfo.giteeAccountId!=null}">
                            <a th:href="${userInfo.giteeUrl}" target="_blank">
                                <img class="img-circle" width="30" style="margin: 0px 0px 0px 0px;"
                                     src="/images/mayun.png"
                                     title="码云主页"/>
                            </a>
                        </td>
                        </td>
                        <td th:if="${userInfo.githubAccountId==null&&userInfo.giteeAccountId==null}">
                            <p class="navbar-text">未绑定</p>
                        </td>
                    </div>
                </div>
                <br><br>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'updatePassword'}">
                <div class="container">
                    <form class="form-signin" method="post">
                        <label for="oldPassword" class="sr-only">请输入旧密码</label>
                        <input type="password" id="oldPassword" name="oldPassword" class="form-control" placeholder="旧密码" required autofocus>
                        <label for="firstNewPassword" class="sr-only">请输入新密码</label>
                        <input type="password" id="firstNewPassword" class="form-control" placeholder="新密码" required>
                        <label for="secondNewPassword" class="sr-only">请再一次输入</label>
                        <input type="password" id="secondNewPassword" class="form-control" placeholder="再一次输入" required>
                        <button class="btn btn-lg btn-primary btn-block" type="button" th:onclick="|javascript:updatePassword('${session.user.username}')|">确认</button>
                    </form>
                </div>
                <!-- /container -->
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'escrowAccount'}">
                <div class="panel panel-primary">
                    <!-- Table -->
                    <table class="table">
                        <tr>
                            <th>序号</th>
                            <th>绑定帐号信息</th>
                            <th>详情</th>
                            <th>操作</th>
                        </tr>
                        <tr th:each="account,accountStat:${escrowAccount}">
                            <td th:text="${accountStat.count}"></td>
                            <td th:text="${account.witchGit==0?'GitHub':'码云'}"></td>
                            <td>
                                <img class="img-circle" width="30" s th:src="${account.avatarUrl}">
                                <span th:text="${account.name}"></span>
                            </td>
                            <td>
                                <button class="btn btn-primary btn-sm" th:onclick="|javascript:unbind('${userInfo.id}','${account.witchGit}')|">解除绑定</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div th:switch="${escrowAccount.size()}">
                    <div th:case="2">
                        <span><strong>当前账户状态无法继续绑定第三方用户,请解绑至少一个用户</strong></span>
                    </div>
                    <div th:case="1">
                        <span><strong>你还可以绑定以下第三方帐号</strong></span><br>
                        <a th:if="${escrowAccount.get(0).witchGit==1}" th:href="@{https://github.com/login/oauth/authorize(client_id=${githubClientId},redirect_uri=${#httpServletRequest.getServletContext().getAttribute('redirectUri')+'?type=github&userId='+session.user.id},scope='user',state=1)}" >
                            <img class="img-circle" width="30" style="margin: 5px 0px 0px 0px;" src="/images/github.jpg" alt="github登陆" title="github登陆"/>
                        </a>
                        <a th:if="${escrowAccount.get(0).witchGit==0}" th:href="@{https://gitee.com/oauth/authorize(client_id=${mayunClientId},redirect_uri=${#httpServletRequest.getServletContext().getAttribute('redirectUri')+'?type=mayun&userId='+session.user.id},response_type='code')}" >
                            <img class="img-circle" width="30" style="margin: 5px 0px 0px 20px;" src="/images/mayun.png" alt="码云登陆" title="码云登陆" />
                        </a>
                    </div>
                    <div th:case="0">
                        <span><strong>你还可以绑定以下第三方帐号</strong></span><br>
                        <a th:href="@{https://github.com/login/oauth/authorize(client_id=${githubClientId},redirect_uri=${#httpServletRequest.getServletContext().getAttribute('redirectUri')+'?type=github&userId='+session.user.id},scope='user',state=1)}" >
                            <img class="img-circle" width="30" style="margin: 5px 0px 0px 0px;" src="/images/github.jpg" alt="github登陆" title="github登陆"/>
                        </a>
                        <a th:href="@{https://gitee.com/oauth/authorize(client_id=${mayunClientId},redirect_uri=${#httpServletRequest.getServletContext().getAttribute('redirectUri')+'?type=mayun&userId='+session.user.id},response_type='code')}" >
                            <img class="img-circle" width="30" style="margin: 5px 0px 0px 20px;" src="/images/mayun.png" alt="码云登陆" title="码云登陆" />
                        </a>
                    </div>
                </div>
                <div th:if="${error==1}" style="margin-top: 15px" class="alert alert-danger" role="alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>该第三方账户已被他人绑定</strong>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${section == 'replies'||section =='questions'||section =='like'}">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li th:if="${pagination.showFirstPage}">
                            <a th:href="@{'/profile/'+${section}(page=${1})}"
                               aria-label="Previous">
                                <span aria-hidden="true">&lt;&lt;</span>
                            </a>
                        </li>
                        <li th:if="${pagination.showPrevious}">
                            <a th:href="@{'/profile/'+${section}(page=${pagination.page - 1})}" aria-label="Previous">
                                <span aria-hidden="true">&lt;</span>
                            </a>
                        </li>

                        <li th:each="page : ${pagination.pages}" th:class="${pagination.page == page}? 'active' : ''">
                            <a th:href="@{'/profile/'+${section}(page=${page})}" th:text="${page}"></a>
                        </li>

                        <li th:if="${pagination.showNext}">
                            <a th:href="@{'/profile/'+${section}(page=${pagination.page +1})}" aria-label="Previous">
                                <span aria-hidden="true">&gt;</span>
                            </a>
                        </li>
                        <li th:if="${pagination.showEndPage}">
                            <a th:href="@{'/profile/'+${section}(page=${pagination.totalPage})}" aria-label="Previous">
                                <span aria-hidden="true">&gt;&gt;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="list-group section">
                <a th:href="${session.user.id==userInfo.id?'/profile/account':'/profile/account/'+userInfo.id}"
                   th:class="${section == 'account'}? 'active list-group-item' : 'list-group-item'" th:text="${session.user.id==userInfo.id?'个人信息':'他的信息'}">
                </a>
                <a th:href="${session.user.id==userInfo.id?'/profile/questions':'/profile/questions/'+userInfo.id}"
                   th:class="${section == 'questions'}? 'active list-group-item' : 'list-group-item'" th:text="${session.user.id==userInfo.id?'我的问题':'他的问题'}"></a>
                <a th:href="${session.user.id==userInfo.id?'/profile/like':'/profile/like/'+userInfo.id}"
                   th:class="${section == 'like'}? 'active list-group-item' : 'list-group-item'" th:text="${session.user.id==userInfo.id?'我的收藏':'他的收藏'}">
                </a>
                <a href="/profile/replies " th:if="${session.user.id==userInfo.id}"
                   th:class="${section == 'replies'}? 'active list-group-item' : 'list-group-item'">
                    最新回复
                    <span class="badge" th:text="${session.unreadCount}"></span>
                </a>
                <a href="/profile/updatePassword" th:if="${session.user.id==userInfo.id}"
                   th:class="${section == 'updatePassword'}? 'active list-group-item' : 'list-group-item'">
                    修改密码
                </a>
                <a href="/profile/escrowAccount" th:if="${session.user.id==userInfo.id}"
                   th:class="${section == 'escrowAccount'}? 'active list-group-item' : 'list-group-item'">
                    第三方账户
                </a>
            </div>
        </div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
</body>
</html>